<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ padding: 0; margin: 0; list-style-type: none; box-sizing: border-box;}
        .cont{ width: 100vw; height: 100vh;;}
        header{ width: 100%; height: 100px; background: #000;}
        header button{ width: 50px; height: 50px; background: #fff; border: 1px solid #333; border-radius: 50%; position: fixed; top: 20px; right: 20px;}
        .menulist{ width: 70%; padding: 20px; height: 100%; background: #eee; position: fixed; top:0; left: 0; transform: translateX(-100%); transition: all 0.5s; z-index: 1;}
        .active{ transform: translateX(0);}
    </style>
</head>
<body>
    <div class="cont">
        <header>
            <button id="nenu">menu</button>
            <ul class="menulist">
                <li>菜单一</li>
                <li>菜单一</li>
                <li>菜单一</li>
                <li>菜单一</li>
                <li>菜单一</li>
                <li>菜单一</li>
            </ul>
        </header>
    </div>
    <script>
        let cont = document.querySelector('.cont');
        let nenu = document.querySelector('#nenu');
        let menulist = document.querySelector('.menulist');
        nenu.addEventListener('click',function(e){
            menulist.classList.toggle('active');
            //判断
            if(menulist.classList.contains('active')){
                cont.style.background = 'range(0, 0, 0)';
            }else{
                cont.style.background = '#fff';
            }
        })
    </script>
</body>
</html>